<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade qmbopinsert" tabindex="-1"
    role="dialog" aria-labelledby="createOrEditModal" aria-hidden="true"
    [config]="{backdrop: 'static', keyboard: !saving}">
    <div style="width:1880px!important;margin: 1.75rem auto;">
        <div class="modal-content">
            <form *ngIf="active" #userForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>工艺规程详情</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div>
                        <div class="m-content">
                            <div class="row">
                                <div class="col-lg-4">
                                    <span class="title"></span>
                                    <div class="m-content">
                                        <div class="m-portlet m-portlet--mobile">
                                            <div class="m-portlet__body">
                                                <!-- <div class="tabbable-line">
                                             -->
                                                <div class="row align-items-center">
                                                    <!--<Primeng-TurboTable-Start>-->
                                                    <div class="primeng-datatable-container"
                                                        [busyIf]="primengTableHelper.isLoading">
                                                        <div class="col-md-12" style="
                                                                float: left;
                                                                height: 600px;
                                                            ">

                                                            <p-tree [value]="files2" selectionMode="single"
                                                                [(selection)]="selectedFiles"
                                                                (onNodeSelect)="nodeSelect($event)"
                                                                [style]="{ height: '90%' }" [loading]="loadingtree">
                                                                <ng-template let-node pTemplate="default">
                                                                    <img class="imgcontent"
                                                                        [src]="(node.nodeLevel==8||node.nodeLevel==9)?'../../../assets/common/images/三级图标.png':node.isLeaf==1?'../../../assets/common/images/二级图标.png':'../../../assets/common/images/一级图标.png'"
                                                                        width="20" height="20" />
                                                                    <span
                                                                        *ngIf="node.key==-1">{{node.techniqueName}}-{{node.techniqueNumber}}
                                                                    </span>
                                                                    <span
                                                                        *ngIf="node.key!=-1">{{node.nodeDrawingNo}}-{{node.nodeName}}</span>
                                                                    <span class="ptagisExport"
                                                                        *ngIf="node.isReturn==1">{{node.isReturn==1?'已回传':''}}</span>
                                                                </ng-template>
                                                            </p-tree>
                                                        </div>

                                                    </div>
                                                    <!--<Primeng-TurboTable-End>-->
                                                </div>
                                                <!-- </div> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <!-- 工艺 -->
                                    <div *ngIf="ischeckTree&&ischeckTree.nodeLevel!=8&&ischeckTree.nodeLevel!=9">
                                        <span class="title"></span>
                                        <p-tabView [style]="{ height: '700px' }">
                                            <p-tabPanel header="工艺规程" [selected]="true">
                                                <div class="col-xl-12" style="height: 600px;">
                                                    <div class="col-md-6" class="item-content" style="float: left">
                                                        工艺规程编号：
                                                        <span class="m-badge m-badge--success m-badge--wide">
                                                            {{processFile?processFile.techniqueNumber:''}}
                                                        </span>
                                                    </div>
                                                    <div class="col-md-6" class="item-content" style="float: left">
                                                        工艺规程名称：
                                                        <span class="m-badge m-badge--success m-badge--wide">
                                                            {{processFile?processFile.techniqueName:''}}
                                                        </span>
                                                    </div>

                                                    <div class="col-md-12"
                                                        style=" float: left;overflow: auto;height: 90%">
                                                        <form *ngIf="active" #itemInfo="ngForm" novalidate
                                                            autocomplete="off">
                                                            <div class="modal-body">
                                                                <div class="form-group">
                                                                    <label for="techniqueNumber">文件编号</label>
                                                                    <input id="techniqueNumber" readonly
                                                                        #techniqueNumberInput="ngModel"
                                                                        name="techniqueNumber" class="form-control"
                                                                        [(ngModel)]="processFile.techniqueNumber"
                                                                        required maxlength="256" />

                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="techniqueName">工艺文件名称</label>
                                                                    <input id="techniqueName" readonly
                                                                        #techniqueNameInput="ngModel"
                                                                        name="techniqueName" class="form-control"
                                                                        [(ngModel)]="processFile.techniqueName" required
                                                                        maxlength="256" />

                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="systemCode">产品系统代号</label>
                                                                    <input id="systemCode" readonly
                                                                        #systemCodeInput="ngModel" name="systemCode"
                                                                        class="form-control"
                                                                        [(ngModel)]="processFile.systemCode" required
                                                                        maxlength="256" />

                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="productCode">产品代号</label>
                                                                    <input id="productCode" readonly
                                                                        #processCodeInput="ngModel" name="productCode"
                                                                        class="form-control"
                                                                        [(ngModel)]="processFile.productCode" required
                                                                        maxlength="256" />

                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="moduleCode">零部组件代号:</label>
                                                                    <input id="moduleCode" readonly
                                                                        #moduleCodeInput="ngModel" name="moduleCode"
                                                                        class="form-control"
                                                                        [(ngModel)]="processFile.moduleCode" required
                                                                        maxlength="256" />
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="moduleName">零部组件名称:</label>
                                                                    <input id="moduleName" readonly
                                                                        #moduleNameInput="ngModel" name="moduleName"
                                                                        class="form-control"
                                                                        [(ngModel)]="processFile.moduleName" required
                                                                        maxlength="256" />
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="stageSignDesc">阶段标记:</label>
                                                                    <input id="stageSignDesc" readonly
                                                                        #moduleNameInput="ngModel" name="stageSignDesc"
                                                                        class="form-control"
                                                                        [(ngModel)]="processFile.stageSignDesc" required
                                                                        maxlength="256" />
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="techniqueTypeDesc">工艺规程类型:</label>
                                                                    <input id="techniqueTypeDesc" readonly
                                                                        #techniqueTypeInput="ngModel"
                                                                        name="techniqueTypeDesc" class="form-control"
                                                                        [(ngModel)]="processFile.techniqueTypeDesc"
                                                                        required maxlength="256" />
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="techniqueCharacter">工艺规程特性:</label>
                                                                    <input id="techniqueCharacter" readonly
                                                                        #techniqueCharacterInput="ngModel"
                                                                        name="techniqueCharacter" class="form-control"
                                                                        [(ngModel)]="processFile.techniqueCharacter"
                                                                        required maxlength="256" />
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="shapeDesc">纸质形式:</label>
                                                                    <input id="shapeDesc" readonly
                                                                        #processCodeInput="ngModel" name="shapeDesc"
                                                                        class="form-control"
                                                                        [(ngModel)]="processFile.shapeDesc" required
                                                                        maxlength="256" />
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="secretDegreeDesc">文件密级:</label>
                                                                    <input id="secretDegreeDesc" readonly
                                                                        #secretDegreeInput="ngModel"
                                                                        name="secretDegreeDesc" class="form-control"
                                                                        [(ngModel)]="processFile.secretDegreeDesc"
                                                                        required maxlength="256" />
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="useUnit">使用单位:</label>
                                                                    <input id="useUnit" readonly #useUnitInput="ngModel"
                                                                        name="useUnit" class="form-control"
                                                                        [(ngModel)]="processFile.useUnit" required
                                                                        maxlength="256" />
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="useTime">使用时间:</label>
                                                                    <input id="useTime" readonly #useTimeInput="ngModel"
                                                                        name="useTime" class="form-control"
                                                                        [(ngModel)]="processFile.useTime" required
                                                                        maxlength="256" />
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="basisFile">依据文件:</label>
                                                                    <input id="basisFile" readonly
                                                                        #basisFileInput="ngModel" name="basisFile"
                                                                        class="form-control"
                                                                        [(ngModel)]="processFile.basisFile" required
                                                                        maxlength="256" />
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="issueUnit">分发单位:</label>
                                                                    <input id="issueUnit" readonly
                                                                        #issueUnitInput="ngModel" name="issueUnit"
                                                                        class="form-control"
                                                                        [(ngModel)]="processFile.issueUnit" required
                                                                        maxlength="256" />
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="remark">备注 *</label>
                                                                    <textarea id="remark" readonly pInputTextarea
                                                                        #remarkInput="ngModel" name="remark"
                                                                        class="form-control"
                                                                        [(ngModel)]="processFile.remark" required
                                                                        maxlength="256"></textarea>

                                                                </div>
                                                            </div>

                                                        </form>

                                                    </div>
                                                </div>
                                            </p-tabPanel>
                                            <p-tabPanel header="工艺说明卡片">
                                                <div class="item-content" style="float:left">工艺说明:</div>
                                                <div class="col-xl-12 m-badge m-badge--wide " style="height: 582px;">
                                                    <div id="pane1"
                                                        style="float: left;overflow: auto;height: 90%;text-align: left;">
                                                    </div>
                                                </div>
                                            </p-tabPanel>
                                        </p-tabView>
                                    </div>
                                    <div *ngIf="ischeckTree&&ischeckTree.nodeLevel==8">
                                        <!-- 工序 -->
                                        <span class="title">BOM详情</span>
                                        <p-tabView [style]="{ height: '700px' }">
                                            <p-tabPanel header="工序说明" [selected]="true">

                                                <div class="col-xl-12">
                                                    <div class="col-md-6" class="item-content" style="float: left">
                                                        工序代码：
                                                        <span class="m-badge m-badge--success m-badge--wide">
                                                            {{processInfo.processesSequence}}
                                                        </span>
                                                    </div>
                                                    <div class="col-md-6" class="item-content" style="float: left">
                                                        工序名称：
                                                        <span class="m-badge m-badge--success m-badge--wide">
                                                            {{processInfo.processesName}}
                                                        </span>
                                                        <span *ngFor="let item of check" style="border:2.5px solid red;
                                                        color: red;
                                                        padding: 5px;
                                                        font-size:16px;
                                                        margin-left:20px;">
                                                            {{item}}
                                                        </span>
                                                    </div>
                                                    <div class="col-md-12" style=" float: left">
                                                        <div class="content" style="margin:10px;height:550px;
                                                        overflow:auto;" [innerHTML]="processInfo.processesExplain">
                                                        </div>

                                                    </div>
                                                </div>

                                            </p-tabPanel>
                                        </p-tabView>
                                    </div>
                                    <div *ngIf="ischeckTree&&ischeckTree.nodeLevel==9" style="height:710px">
                                        <div class="col-xl-24" style="height:30px;"
                                            *ngIf="workstepInfo&&workstepInfo.processesSequence">
                                            <div class="col-md-6" class="item-content" style="float: left">
                                                工步代码：
                                                <span class="m-badge m-badge--success m-badge--wide">
                                                    {{ischeckTree.nodeDrawingNo}}-{{ischeckTree.nodeName}}
                                                </span>
                                            </div>
                                            <div class="col-md-6" class="item-content" style="float: left">
                                                工序名称：
                                                <span class="m-badge m-badge--success m-badge--wide">
                                                    {{workstepInfo.processesName}}
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-md-24" class="item-content-step" style="height:250px;">
                                            <div class="col-md-6" class="item-content" style="float: left;height:100%;">
                                                <p-card header="工步信息" [style]="{width: '500px'}">
                                                    <div class="content" style="margin: 10px;"
                                                        [innerHTML]="workstepInfo&&workstepInfo.workStepOut&&workstepInfo.workStepOut.workStepName">
                                                    </div>
                                                </p-card>
                                            </div>
                                            <div class="col-md-6" class="item-content" style="float: left;height:100%;"
                                                *ngIf="workstepInfo&&workstepInfo.workStepOut&&workstepInfo.workStepOut.workStepContent">
                                                <p-card header=" " [style]="{width: '500px'}">
                                                    <div class="content" style="margin: 10px;"
                                                        [innerHTML]="workstepInfo&&workstepInfo.workStepOut&&workstepInfo.workStepOut.workStepContent">
                                                    </div>
                                                </p-card>

                                            </div>

                                        </div>

                                        <div class="col-md-12" class="item-content"
                                            style="float: left;margin-top: 20px; ">
                                            <p-tabView (onChange)="onTabChange($event)" [style]="{ height: '400px' }">
                                                <p-tabPanel [header]="tableitem.tableName" [selected]="i == 0"
                                                    *ngFor="let tableitem of workstepInfo.tableNameDictionary;let i = index">
                                                </p-tabPanel>
                                                <div class="col-xl-24">
                                                    <div class="primeng-datatable-container processlabel">
                                                        <p-table #dataTable [value]="workStepData" [paginator]="false"
                                                            dataKey="id" [scrollable]="true" ScrollWidth="100%">
                                                            <ng-template pTemplate="header">
                                                                <tr>
                                                                    <th style="width: 150px"
                                                                        *ngFor="let headerItem of (workStepHeader&&workStepHeader.filedName?workStepHeader.filedName:[])">
                                                                        {{headerItem}}
                                                                    </th>
                                                                </tr>
                                                            </ng-template>
                                                            <ng-template pTemplate="body" let-record="$implicit"
                                                                let-rowIndex="rowIndex">
                                                                <tr>
                                                                    <td style="width: 150px"
                                                                        *ngFor="let headerprop of (workStepHeader&&workStepHeader.filedDesc?workStepHeader.filedDesc:[])">
                                                                        <ng-container [ngSwitch]="headerprop">
                                                                            <div *ngSwitchCase="'serialNum'">
                                                                                <span>
                                                                                    {{rowIndex+1}}
                                                                                </span>
                                                                            </div>
                                                                            <!-- 多媒体字段 -->
                                                                            <div *ngSwitchCase="'photoNo'">
                                                                                <div class="imgList">
                                                                                    <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                                    </p-lightbox> -->
                                                                                    <a target="_blank"
                                                                                        [href]="item.source"
                                                                                        style="padding: 5px;"
                                                                                        *ngFor="let item of getImage(record[headerprop])">
                                                                                        <img [src]="item.source"
                                                                                            height="30px" width="30px">
                                                                                    </a>
                                                                                    <a target="_blank"
                                                                                        [href]="item.source"
                                                                                        style="padding: 5px;"
                                                                                        *ngFor="let item of getVideo(record[headerprop])">
                                                                                        <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                            <div *ngSwitchCase="'secondPhotoNo'">
                                                                                <div class="imgList">
                                                                                    <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                                    </p-lightbox> -->
                                                                                    <a target="_blank"
                                                                                        [href]="item.source"
                                                                                        style="padding: 5px;"
                                                                                        *ngFor="let item of getImage(record[headerprop])">
                                                                                        <img [src]="item.source"
                                                                                            height="30px" width="30px">
                                                                                    </a>
                                                                                    <a target="_blank"
                                                                                        [href]="item.source"
                                                                                        style="padding: 5px;"
                                                                                        *ngFor="let item of getVideo(record[headerprop])">
                                                                                        <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                            <div *ngSwitchCase="'thirdPhotoNo'">
                                                                                <div class="imgList">
                                                                                    <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                                    </p-lightbox> -->
                                                                                    <a target="_blank"
                                                                                        [href]="item.source"
                                                                                        style="padding: 5px;"
                                                                                        *ngFor="let item of getImage(record[headerprop])">
                                                                                        <img [src]="item.source"
                                                                                            height="30px" width="30px">
                                                                                    </a>
                                                                                    <a target="_blank"
                                                                                        [href]="item.source"
                                                                                        style="padding: 5px;"
                                                                                        *ngFor="let item of getVideo(record[headerprop])">
                                                                                        <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                            <div *ngSwitchCase="'fourthPhotoNo'">
                                                                                <div class="imgList">
                                                                                    <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                                    </p-lightbox> -->
                                                                                    <a target="_blank"
                                                                                        [href]="item.source"
                                                                                        style="padding: 5px;"
                                                                                        *ngFor="let item of getImage(record[headerprop])">
                                                                                        <img [src]="item.source"
                                                                                            height="30px" width="30px">
                                                                                    </a>
                                                                                    <a target="_blank"
                                                                                        [href]="item.source"
                                                                                        style="padding: 5px;"
                                                                                        *ngFor="let item of getVideo(record[headerprop])">
                                                                                        <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                            <!-- 操作人 1-5检 -->
                                                                            <!-- <div *ngSwitchCase="'route'">
                                                                                <span style="color: blue;cursor:pointer"
                                                                                    (click)="showUrlInfo(record)">
                                                                                    {{record[headerprop]}}
                                                                                </span>
                                                                            </div> -->
                                                                            <div *ngSwitchDefault>
                                                                                {{record[headerprop]}}
                                                                            </div>
                                                                        </ng-container>
                                                                    </td>
                                                                </tr>
                                                            </ng-template>
                                                        </p-table>
                                                    </div>
                                                </div>
                                            </p-tabView>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>